<!DOCTYPE html>
<html lang="en" style="height: auto;">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title class="title"></title>
  <link rel="stylesheet" href="./static/plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="./static/css/adminlte.min.css">
  <link rel="stylesheet" href="./static/plugins/sweetalert2/sweetalert2.min.css">
  <link rel="stylesheet" href="./static/css/index.css">
  <link href="./static/css/google-fonts.css" rel="stylesheet">
</head>

<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
  <div class="wrapper">
    <div class="content-wrapper" style="min-height: 757px;">
      <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12 col-md-7 col-lg-8">
              <div class="card" style="position: sticky; top: 20px;">
                <div class="card-body p-0">
                  <video id="videoPlayer" autoplay="" controls="" muted="" playsinline=""
                    src="blob:http://120.77.15.111:7087/1db78c4e-08d8-4627-b79b-fadd22013a9b"></video>
                  <canvas id="canvas" class="d-none" width="400" height="225"></canvas>
                </div>
                <input type="hidden" id="uuid" value="9e5d74a7-9dc1-4bcd-8977-5799874e6e12">
                <input type="hidden" id="channel" value="0">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    let streams = { "27aec28e-6181-4753-9acd-0456a75f0289": { "name": "111111111", "channels": { "0": { "url": "rtmp://171.25.232.10/12d525bc9f014e209c1280bc0d46a87e", "status": 1, "audio": true } } }, "9e5d74a7-9dc1-4bcd-8977-5799874e6e12": { "name": "live_uid_123456", "channels": { "0": { "url": "rtsp://120.77.15.111:8554/live_uid_123456", "on_demand": true } } } };
  </script>
  <script src="./static/plugins/jquery/jquery.min.js"></script>
  <script src="./static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="./static/js/adminlte.min.js"></script>
  <script src="./static/plugins/sweetalert2/sweetalert2.min.js"></script>
  <script src="./static/js/index.js"></script>
  <script>
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr();
            strs = str.split("&");
            for (var i =0;  i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    $(document).ready(() => {
      var Request = new Object();
        Request = GetRequest();
        var uid= Request["uuid"];
        var ip= Request["ip"];
        var taskName= Request["taskName"];
        $('.title').text(taskName);   //设置标题
      startPlay(ip,uid);
    });


    let mseQueue = [],
      mseSourceBuffer, mseStreamingStarted = false, videoSound = false;

    function startPlay(ip,uid) {
      // let _ip = '120.77.15.111:7087';
      let _ip = ip;
      // let uuid = 'ff71b4b3-74e7-41ae-a3df-2f9bc0118776';
      let uuid = uid;
      let channel = '0';
      location.protocol == 'https:' ? potocol = 'wss' : potocol = 'ws';
      let url = potocol + '://' + _ip + '/stream/' + uuid + '/channel/' + channel + '/mse?uuid=' + uuid + '&channel=' + channel;
      let mse = new MediaSource();
      $("#videoPlayer")[0].src = window.URL.createObjectURL(mse);
      console.log($("#videoPlayer")[0].src)
      console.log(url)
      mse.addEventListener('sourceopen', function () {
        let ws = new WebSocket(url);
        ws.binaryType = "arraybuffer";
        ws.onopen = function (event) {
          console.log('Connect to ws');
        }
        ws.onmessage = function (event) {
          let data = new Uint8Array(event.data);
          if (data[0] == 9) {
            decoded_arr = data.slice(1);
            if (window.TextDecoder) {
              mimeCodec = new TextDecoder("utf-8").decode(decoded_arr);
            } else {
              mimeCodec = Utf8ArrayToStr(decoded_arr);
            }
            if (mimeCodec.indexOf(',') > 0) {
              videoSound = true;
            }
            mseSourceBuffer = mse.addSourceBuffer('video/mp4; codecs="' + mimeCodec + '"');
            mseSourceBuffer.mode = "segments"
            mseSourceBuffer.addEventListener("updateend", pushPacket);

          } else {
            readPacket(event.data);
          }
        };
      }, false);

    }

    function pushPacket() {
      if (!mseSourceBuffer.updating) {
        if (mseQueue.length > 0) {
          packet = mseQueue.shift();
          mseSourceBuffer.appendBuffer(packet);
        } else {
          mseStreamingStarted = false;
        }
      }
      if ($("#videoPlayer")[0].buffered.length > 0) {
        if (typeof document.hidden !== "undefined" && document.hidden && !videoSound) {

          $("#videoPlayer")[0].currentTime = $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1)) - 0.5;
        }
      }
    }

    function readPacket(packet) {
      if (!mseStreamingStarted) {
        mseSourceBuffer.appendBuffer(packet);
        mseStreamingStarted = true;
        return;
      }
      mseQueue.push(packet);
      if (!mseSourceBuffer.updating) {
        pushPacket();
      }
    }

    $("#videoPlayer")[0].addEventListener('loadeddata', () => {
      $("#videoPlayer")[0].play();
      let browser = browserDetector();
      if (!browser.safari) {
        makePic();
      }
    });

    $("#videoPlayer")[0].addEventListener('pause', () => {
      if ($("#videoPlayer")[0].currentTime > $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1))) {
        $("#videoPlayer")[0].currentTime = $("#videoPlayer")[0].buffered.end(($("#videoPlayer")[0].buffered.length - 1)) - 0.1;
        $("#videoPlayer")[0].play();
      }
    });

    $("#videoPlayer")[0].addEventListener('error', () => {
      console.log('video_error')
    });
  </script>
</body>

</html>